<!-- 产线资源 -->
<template>
  <basic-container>
    <el-tabs type="border-card" class="informationLabel">
      <avue-form ref="form" class="workInfoForm" v-model="dispatchDialog.workOrderInfo.form" :option="dispatchDialog.workOrderInfo.options" @submit="handleSubmit">
        <template slot-scope="{ size }" slot="menuForm">
          <el-button icon="el-icon-search" type="primary" size="small" @click="$refs.form.submit()">搜索</el-button>
          <el-button icon="el-icon-delete" size="small" @click="handleEmpty">清空</el-button>
        </template>
      </avue-form>
    </el-tabs>
    <div class="dispatchDialog">
      <div class="gannt-menu">
        <div class="gannt-menu-button-group">
          <div class="legendList">
            <div class="legendItem"><span class="finished"></span>累计工时占比<90%</div>
            <div class="legendItem"><span class="finishing"></span>90%≤累计工时占比≤100%</div>
            <div class="legendItem"><span class="notFinish"></span>累计工时占比>100%</div>
          </div>
          <div class="sign">资源单位:H</div>
          <div class="sign">资源维度:天</div>
        </div>
      </div>
      <div id="gannt-container" v-loading="ganntLoading">
        <GanttComponent v-if="showGantt" ref="gantt" class="left-container" :tasks="tasks" :readonly="true"></GanttComponent>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { getLineResource } from '@/api/product/workOrderPlanAps';

import { mapGetters, mapState } from 'vuex';
import GanttComponent from './components/GanttComponent.vue';
import { tasksData, dateColums } from '@/views/product/data/workorderPlan';
console.log(tasksData, dateColums);
export default {
  name: 'LineResource',
  components: {
    GanttComponent
  },
  data() {
    return {
      showGantt: false,
      ganntLoading: false,
      tasks: {
        noWorkDates: [],
        initTime: [],
        data: []
      },
      search: {},
      dispatchDialog: {
        workOrderInfo: {
          form: {},
          options: {
            submitBtn: false,
            emptyBtn: false,
            labelWidth: 50,
            menuSpan: 4,
            column: [
              {
                label: '工段',
                prop: 'sectionName',
                span: 6
              },
              {
                label: '产线',
                prop: 'lineName',
                span: 6
              },
              {
                label: '日期',
                prop: 'daterange',
                clearable: false,
                type: 'datetimerange',
                value: [this.$moment().startOf('month').format('YYYY-MM-DD 00:00:00'), this.$moment().endOf('month').format('YYYY-MM-DD 23:59:59')],
                format: 'yyyy-MM-dd HH:mm:ss',
                valueFormat: 'yyyy-MM-dd HH:mm:ss',
                startPlaceholder: '开始时间',
                endPlaceholder: '完成时间',
                span: 6
              }
            ]
          }
        }
      }
    };
  },
  computed: {},
  mounted() {
    this.handleGetAllApsResource({
      sectionName: '',
      lineName: '',
      queryTimeStart: this.$moment().startOf('month').format('YYYY-MM-DD 00:00:00'),
      queryTimeEnd: this.$moment().endOf('month').format('YYYY-MM-DD 23:59:59')
    });
  },
  methods: {
    // 获取aps所有资源列表
    handleGetAllApsResource(params) {
      const that = this;
      that.ganntLoading = true;
      if (params.queryTimeStart && params.queryTimeEnd) {
        that.tasks.initTime = [params.queryTimeStart, params.queryTimeEnd];
      }
      getLineResource(params)
        .then((res) => {
          let data = res.data.data;
          let dateNonWorkingList = data.dateNonWorkingList;
          let result = [];
          data.sectionList.map((section) => {
            section.lineList.map((line) => {
              result.push({
                id: section.sectionId + line.lineId,
                type: 'project',
                render: 'split',
                text: section.sectionName + '/' + line.lineName,
                openLineDuration: line.openLineDuration,
                clearLineDuration: line.clearLineDuration,
                uph: line.uph
              });
              let sectionNoWorkList = dateNonWorkingList.find((item) => item.sectionId === section.sectionId);
              if (line.dateCodeList && line.dateCodeList.length > 0) {
                line.dateCodeList.map((date) => {
                  let isNoWorkday = that.handleIsNoWorkday(dateNonWorkingList, date.dateCode, section.sectionId);
                  result.push({
                    id: date.id,
                    date: date.dateCode,
                    isNoWorkday: isNoWorkday,
                    parent: section.sectionId + line.lineId,
                    text: date.workHourAccumulate,
                    progress: Number(date.workHourAccumulatePercent) / 100,
                    start_date: date.dateCode,
                    workHourAccumulate: date.workHourAccumulate,
                    remainingWorkHour: date.remainingWorkHour,
                    workHourAccumulatePercent: date.workHourAccumulatePercent,
                    duration: 24,
                    detailData: date.detailData
                  });
                });
              }
              if (sectionNoWorkList && sectionNoWorkList.nonWorkingDayList && sectionNoWorkList.nonWorkingDayList.length > 0) {
                sectionNoWorkList.nonWorkingDayList.map((day) => {
                  result.push({
                    id: section.sectionId + line.lineId + day,
                    date: day,
                    isNoWorkday: true,
                    parent: section.sectionId + line.lineId,
                    text: '',
                    progress: 0,
                    start_date: day,
                    workHourAccumulate: '',
                    remainingWorkHour: '',
                    workHourAccumulatePercent: 0,
                    duration: 24,
                    detailData: []
                  });
                });
              }
            });
          });
          console.log(result);
          that.tasks.data = result;
          setTimeout(() => {
            that.$refs.gantt && that.$refs.gantt.drawGantt();
          });
        })
        .catch(() => {})
        .finally(() => {
          that.ganntLoading = false;
          that.showGantt = true;
        });
    },
    handleIsNoWorkday(dateNonWorkingList, date, sectionId) {
      if (!dateNonWorkingList || dateNonWorkingList.length === 0) {
        // 如果没有非工作日列表或列表为空，则默认不是非工作日
        return false;
      }
      // 使用 find 查找匹配的 sectionId
      const section = dateNonWorkingList.find((dateObj) => dateObj.sectionId === sectionId);
      if (section) {
        // 如果找到了匹配的 sectionId，检查 date 是否在非工作日列表中
        return section.nonWorkingDayList.includes(date);
      }
      // 如果没有找到匹配的 sectionId，则默认不是非工作日
      return false;
    },
    // 搜索
    handleSubmit(form, done) {
      if (form.daterange.length != 2) {
        this.$message({
          message: '请选择日期范围',
          type: 'warning'
        });
        done();
        return;
      }
      let params = {
        sectionName: form.sectionName,
        lineName: form.lineName,
        queryTimeStart: form.daterange ? form.daterange[0] : '',
        queryTimeEnd: form.daterange ? form.daterange[1] : ''
      };
      this.handleGetAllApsResource(params); // 获取aps所有资源列表
      done();
    },
    handleEmpty() {
      this.dispatchDialog.workOrderInfo.form.sectionName = '';
      this.dispatchDialog.workOrderInfo.form.lineName = '';
      this.handleGetAllApsResource({
        sectionName: '',
        lineName: '',
        queryTimeStart: this.$moment().startOf('month').format('YYYY-MM-DD 00:00:00'),
        queryTimeEnd: this.$moment().endOf('month').format('YYYY-MM-DD 23:59:59')
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .workInfoForm {
  .el-form-item {
    margin-bottom: 0px;
  }
}
::v-deep .dispatchDialog {
  .gannt-menu {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
    .lineResource {
      display: flex;
      .el-form-item {
        margin-bottom: 0;
        display: flex;
        align-items: center;
      }
    }
    &-button-group {
      display: flex;
      align-items: center;
      .legendList {
        display: flex;
        .legendItem {
          margin-right: 5px;
          span {
            display: inline-block;
            height: 12px;
            width: 12px;
            margin-right: 3px;
            &.finished {
              background-color: #81d3ff;
            }
            &.finishing {
              background-color: #70e603;
            }
            &.notFinish {
              background-color: red;
            }
          }
        }
      }
      .sign {
        margin-left: 10px;
      }
    }
  }
  #gannt-container {
    width: 100%;
    height: calc(100vh - 280px);
    .left-container {
      overflow: hidden;
      position: relative;
      height: 100%;
    }
  }
}
</style>
